<template>
  <div>
    <h3>{{title}}</h3>
    <el-button @click="getPower" size="small" type="primary">动态获取权限</el-button>
    <div class="nav flex">
      <div class="nav-item" :class="{'active':item.selected}" v-for="(item,index) in navList" :key="index" @click.stop="switchNav(item,index)">{{item.text}}</div>
    </div>
    <slider :dataList="list" @jumpFn="jump"></slider>
    <router-view></router-view>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import slider from '@/components/slider'
import { permission } from '@/api/modules/permission'
export default {
  components:{
    slider
  },
  data(){
    return {
      title:'first,vue权限设置',
      prevSelectedObj:'init',
      navList:[
        {text:'list1',selected:true},
        {text:'list2',selected:false},
      ],
    }
  },
  methods:{
    ...mapMutations([
      'upDateSeletedRouterIndex'
    ]),
    getPower(){
      permission.getPower().then(res => {
        console.log('res',res);        
      }).catch(err => {
        console.log('err',err);
      })
      // 
    },
    switchNav(item,index){ // 导航切换
      for(let obj of this.navList){
        obj.selected = false
      }
      item.selected = true

      console.log(index,this.addRouteList)
      this.upDateSeletedRouterIndex(index)
    },
    jump(item){ // 页面跳转
      console.log('页面跳转')
      if(item.name && this.prevSelectedObj.name!=item.name){
        if(!item.selected){
          this.$set(item,'selected',true)
        }
        if(this.prevSelectedObj!='init'){
          this.prevSelectedObj.selected = false
        }
        this.prevSelectedObj = item
        console.log(item.name)
        this.$router.push({path:item.path})
      }
    }
  },
  computed: {
    ...mapState([
      'isLoading',
      'routers',
      'addRouteList',
      'curSeletedRouterIndex'
    ]),
    list(){
      let arr = this.addRouteList[this.curSeletedRouterIndex]
      arr = this.routers.concat(arr)
      // console.log('routers:',this.routers)
      // console.log('arr:',arr)
      // debugger
      return arr
    }
  }
  
}
</script>

<style >
.flex{
  display: flex;
  justify-content:center;align-items:center;
}
.marginTop{margin-top:20px !important;}
.marginBottom{margin-bottom:20px !important;}
.fl{float:left;}
.fr{float:right;}
.clearfix:after{
  content:'';/*加一段内容*/
  display:block;/*让生成的元素以块级元素显示，占满剩余空间*/
  height:0;/*避免生成的内容破坏原有布局高度*/
  clear:both;/*清除浮动*/
  visibility:hidden;/*让生成的内容不可见*/
}

  .nav{
    width:100%;
    justify-content:space-around;
  }
  .nav .nav-item{
    padding:8px 30px;
    border-radius:4px;
    border:1px solid rgb(143, 143, 143);
  }
  .nav .nav-item:hover,
  .nav .nav-item.active{
    color:#fff;
    background:#0cb0ef;
  }

  ul{
  margin:0;padding:0;
  list-style:none;
  
  }
  ul li{
    padding:8px 10px;margin:8px auto;
    text-align:left;
    border-radius:2px;
    border:1px solid #eee;
  }

  .level2 li{
    margin:10px auto;
    color:#fff;
    background:#1e6b82;
  }
  .level2 li.active{
    background:#0cb0ef;
  }

  .level3 li{
    margin:10px auto;
    color:#fff;
    background:#a87931;
  }

  .level4 li{
    margin:10px auto;
    color:#fff;
    background:#31a863;
  }

</style>


